import BaseView from "../baseView.js";

let that = {};
export default class EditCinema extends BaseView {
    constructor(id, cinemaId) {
        super(id);
        this.cinemaId = cinemaId;
        this.mounted();
        this.form = layui.form;
        that = this
    }

    mounted() {
        $.ajax({
            type: 'get',
            url: '/cinema/getone/' + this.cinemaId,
            dataType: 'json',
            success: (data) => {
                if (data.code == 1) {
                    // console.log(data);
                    let res = data.data;
                    //修改Dom
                    $("#name").val(res.name);
                    $("#address").val(res.address);
                    $("#phone").val(res.phone);
                    // res.status==true?res.status='是':res.status='否';
                    if (res.status == true) {
                        $("option[value='是']").attr('selected', 'selected');
                    } else {
                        $("option[value='否']").attr('selected', 'selected');
                    }
                    $("#demo1").attr('src', `../../images/${res.photo}`);

                    // this.form.render()
                    layui.use('form', function () {
                        var form = layui.form;
                        //获得表单
                        // myform = form
                        //重新渲染表单
                        form.render();
                    });
                } else {
                    alert(data.msg)
                }
            }
        });
    }

    render() {
        $("#Content").html(`
        <div>
        <div style="margin: 30px 10px 0 20px ">
        <span class="layui-breadcrumb" style="visibility:visible;">
            <a>猫眼后台管理系统</a>
            <a>影院管理</a>
            <a><cite>修改影院信息</cite></a>
        </span>
        <hr/>
        </div>
        <div>
        <form class="layui-form" id='resetForm'>
        <div class="layui-form-item">
        <label class="layui-form-label">影院名称:</label>
            <div class="layui-input-block">
            <input type="text" id="name" required   placeholder="请输入影院名称"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">影院地址:</label>
            <div class="layui-input-block">
            <input type="text" id="address" required   placeholder="请输入影院地址"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">联系方式:</label>
            <div class="layui-input-block">
            <input type="text" id="phone" required   placeholder="请输入联系方式"  class="layui-input">
            </div>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">是否营业：</label>
                <div class="layui-input-block">
                    <select id="statuselected" name="状态" lay-verify="required">
                    <option value=""></option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                    </select>
                </div>
            </div>
        </form>

        <!-- 上传图片 -->
        <div class="layui-upload" style="margin-left: 112px;margin-top: 10px;margin-bottom: 30px;">
        <button type="button" class="layui-btn" id="upload_test"><i class="layui-icon">&#xe67c;</i>上传图片</button>
        <div class="layui-upload-list" style="width: 100px;height:100px;border: 1px solid hotpink;">
            <img  class="layui-upload-img" id="demo1" style="width: 100px;height:100px;">
        </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='editBtn' class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
            <button type="button" id='resetBtn' class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id='backButn' class="layui-btn layui-btn-warm">返回</button>
            </div>
        </div>
        </form>
        </div>
        </div>

        <script>
        layui.use('form', function(){
        var form = layui.form;
        //获得表单
        // myform = form
        //重新渲染表单
        form.render();
        });
        </script>
       `);
    }

    handle() {
        //#region
        // layui.use(['upload', 'element', 'layer'], function () {
        //     var $ = layui.jquery
        //         , upload = layui.upload
        //         , element = layui.element
        //         , layer = layui.layer;

        //     $('#editBtn').click(() => {
        //         if ($('#demo1').attr('src') == undefined) {
        //             console.log('plpl')
        //             $.ajax({
        //                 type: "put",
        //                 url: "/cinema/editext",
        //                 data: {
        //                     "_id": this.cinemaId,
        //                     "name": $("#name").val(),
        //                     "address": $("#address").val(),
        //                     "phone": $("#phone").val(),
        //                     "status": $("#statuselected").val(),
        //                 },
        //                 success: (data) => {
        //                     if (data.code == 1) {
        //                         layer.msg(data.msg);
        //                         // alert(data.msg);
        //                         //跳转页面
        //                         window.location.hash = "#/main/showall"
        //                     } else {
        //                         layer.msg(data.msg);
        //                     }
        //                 }
        //             });
        //         } else {
        //             //常规使用 - 普通图片上传
        //             var uploadInst = upload.render({
        //                 elem: '#upload_test'
        //                 , url: '/cinema/editcinema' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        //                 , auto: false   //不自动上传
        //                 , bindAction: '#editBtn'    //绑定一个按钮来触发上传
        //                 // 传入的其他的参数（除了文件以外的参数）
        //                 , data: {
        //                     _id: () => that.cinemaId,
        //                     name: () => $('#name').val(),
        //                     address: () => $('#address').val(),
        //                     phone: () => $('#phone').val(),
        //                     status: () => $('#statuselect').val()
        //                 }
        //                 , choose: function (obj) {
        //                     //预读本地文件示例，不支持ie8
        //                     obj.preview(function (index, file, result) {
        //                         console.log(result);
        //                         $('#demo1').attr('src', result); //图片链接（base64）
        //                     });

        //                 },
        //                 done: function (res) {
        //                     //如果上传失败
        //                     if (res.code == 0) {
        //                         return layer.msg('上传失败');
        //                     }
        //                     //上传成功的一些操作
        //                     //……
        //                     // alert("上传成功");
        //                     layer.msg('修改成功');
        //                     window.location.hash = "#/main/showall";
        //                     $('#demoText').html(''); //置空上传失败的状态
        //                 },
        //                 error: function () {
        //                     //演示失败状态，并实现重传
        //                     var demoText = $('#demoText');
        //                     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        //                     demoText.find('.demo-reload').on('click', function () {
        //                         uploadInst.upload();
        //                     });
        //                 }
        //             });
        //         }
        //     })
        // });
        //#endregionregion



        //#endregion

        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#upload_test'
                , url: '/cinema/editcinema' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , auto: false   //不自动上传
                , bindAction: '#editBtn'    //绑定一个按钮来触发上传
                // 传入的其他的参数（除了文件以外的参数）
                , data: {
                    _id: () => that.cinemaId,
                    name: () => $('#name').val(),
                    address: () => $('#address').val(),
                    phone: () => $('#phone').val(),
                    status: () => $('#statuselect').val()
                }
                , choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        // console.log(result);
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                },
                done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作
                    //……
                    // alert("上传成功");
                    layer.msg('修改成功');
                    window.location.hash = "#/main/showall";
                    $('#demoText').html(''); //置空上传失败的状态
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }

            });
        });

        //重置按钮
        $("#resetBtn").click(() => {
            // 清空表单数据
            this.mounted();
        })
        
        //返回
        $("#backButn").click(() => {
            window.location.hash = "#/main/showall";
        })
    }

}